<template>
  <div class="dashboard-container">
    <div class="dashboard-top">
      <div class="ddll">
        <div class="dtop">
          <div class="dtop-left">
            <div class="gd">
              <div class="gd-header">
                <div class="gd-title">工单统计</div>
                <span>{{ startTime }} ~ {{ endTime }}</span>
              </div>
              <div class="gd-body">
                <div class="gd-status">
                  <div class="gd-num">{{ taskTotal }}</div>
                  <div class="gd-text">工单总数(个)</div>
                </div>
                <div class="gd-status">
                  <div class="gd-num">{{ taskTotal1 }}</div>
                  <div class="gd-text">完成工单(个)</div>
                </div>
                <div class="gd-status">
                  <div class="gd-num">{{ taskTotal2 }}</div>
                  <div class="gd-text">进行工单(个)</div>
                </div>
                <div class="gd-status">
                  <div class="gd-num">{{ taskTotal3 }}</div>
                  <div class="gd-text">取消工单(个)</div>
                </div>
              </div>
            </div>
            <div class="xs">
              <div class="xs-header">
                <div class="xs-title">销售统计</div>
                <span>{{ startTime }} ~ {{ endTime }}</span>
              </div>
              <div class="xs-body">
                <div class="xs-status">
                  <div class="xs-num">{{ orderCount }}</div>
                  <div class="xs-text">订单量(个)</div>
                </div>
                <div class="xs-status">
                  <div class="xs-num">{{ orderAmount }}</div>
                  <div class="xs-text">销售额(万元)</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="charts">
          <div class="charts-header">
            <div class="xs-header">
              <div class="xs-title">销售统计</div>
              <span>{{ startTime }} ~ {{ endTime }}</span>
            </div>
            <div class="week-month-year">
              <div :class="{checked:v == 0}" @click="changFn(0)"> 周 </div>
              <div :class="{checked:v == 1}" @click="changFn(1)"> 月 </div>
              <div :class="{checked:v == 2}" @click="changFn(2)"> 年 </div>
            </div>
          </div>
          <div class="charts-body">
            <div ref="chart" class="charts-left">chart1</div>
            <div ref="chart1" class="charts-right">chart2</div>
          </div>
        </div>
      </div>
      <div class="dtop-right">
        <div class="skuList">
          <div class="gd-header">
            <div class="gd-title">商品热榜</div>
            <span>{{ startTime }} ~ {{ endTime }}</span>
          </div>
          <div class="sku-body">
            <div v-for="(item,index) in skuList" :key="item.index" class="el-row">
              <div class="sku-l">{{ index + 1 }}</div>
              <div class="sku-name">{{ item.skuName }}</div>
              <div class="sku-count">{{ item.count }}单</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="dbottom">
      <div class="dbottom-left">
        <div class="dbl-header">
          <div class="dbl-header-title">合作商点位数Top5</div>
          <i> <i class="el-icon-chat-dot-round" /></i>
        </div>
        <div class="dbl-body">
          <div ref="chart2" class="dbl-chart">66</div>
          <div class="dbl-right">
            <div class="count">{{ res7 }}</div>
            <div class="name">点位数</div>
            <div class="count">{{ res6 }}</div>
            <div class="name">合作商数</div>
          </div>
        </div>
      </div>
      <div class="dbottom-right">
        <div class="dbl-header">
          <div class="dbl-header-title">异常设备监控</div>
          <i> <i class="el-icon-chat-dot-round" /></i>
        </div>
        <div class="empty">
          <div><img src="	http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt=""></div>
          <div class="tips">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTaskInfo, getOrderCount, getOrderAmount } from '@/api/task'
import { getLineInfo, getBarInfo, getPieInfo, getPartnerCount, getNodeCount, getSkuTop } from '@/api/charts'
import { mapGetters } from 'vuex'
import store from '@/store'
import moment from 'moment'
export default {
  name: 'Dashboard',
  data() {
    return {
      v: 0,
      startTime: '',
      endTime: '',
      startTime1: '',
      startTime2: '',
      endTime1: '',
      endTime2: '',
      taskTotalnum: [],
      orderCount: '',
      orderAmount: '',
      seriesArr: [],
      seriesArr1: [],
      xAxisArr: [],
      xAxisArr1: [],
      piedata: [],
      res6: '',
      res7: '',
      skuList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    taskTotal: {
      get() {
        return this.taskTotalnum.reduce((sum, item) => {
          return sum + item.total
        }, 0)
      }
    },
    taskTotal1: {
      get() {
        return this.taskTotalnum.reduce((sum, item) => {
          return sum + item.completedTotal
        }, 0)
      }
    },
    taskTotal2: {
      get() {
        return this.taskTotalnum.reduce((sum, item) => {
          return sum + item.progressTotal
        }, 0)
      }
    },
    taskTotal3: {
      get() {
        return this.taskTotalnum.reduce((sum, item) => {
          return sum + item.cancelTotal
        }, 0)
      }
    }
  },
  async created() {
    await store.dispatch('user/getUserinfo')
    const start = this.$moment()
      .subtract('15', 'd')
      .format('YYYY.MM.DD') // 当前时间往前推1天（24小时）：2021-05-10
    const end = this.$moment().format('YYYY.MM.DD') // 当前时间：2021-05-11
    // console.log(start)
    this.startTime = start
    this.endTime = end

    const start1 = this.$moment()
      .subtract('15', 'd')
      .format('YYYY-MM-DD 00:00:00')
    const end1 = this.$moment().format('YYYY-MM-DD 23:59:59')
    // console.log(start1, end1)
    this.startTime1 = start1
    this.endTime1 = end1

    // 红色卡片接口
    const start2 = this.$moment()
      .subtract('15', 'd')
      .format('YYYY-MM-DD') // 当前时间往前推1天（24小时）：2021-05-10
    const end2 = this.$moment().format('YYYY-MM-DD') // 当前时间：2021-05-11
    // console.log(start)
    this.startTime2 = start2
    this.endTime2 = end2

    const res = await getTaskInfo(
      this.startTime1, this.endTime1
    ) // 获取工单详情
    // console.log(res)
    this.taskTotalnum = res

    const res1 = await getOrderCount( // 获取订单总数
      this.startTime2, this.endTime2
    )
    // console.log(res1)
    this.orderCount = res1

    const res2 = await getOrderAmount( // 获取红色收入
      this.startTime2, this.endTime2
    )
    // console.log(res1)
    this.orderAmount = (res2 / 1000000).toFixed(2)

    this.getLineInfo()
    this.getBarInfo()
    const res5 = await getPieInfo( // 获取chart3数据
    )
    // console.log(res5)
    this.$nextTick(() => {
      this.piedata = res5
    })

    const res6 = await getPartnerCount() // 获取chart3数据
    // console.log(res6)
    this.res6 = res6

    const res7 = await getNodeCount() // 获取chart3数据
    // console.log(res7)
    this.res7 = res7

    const res8 = await getSkuTop(
      10, this.startTime2, this.endTime2
    )
    // console.log(res8)
    this.skuList = res8

    this.changFn()
  },
  mounted() {
    setTimeout(() => {
      this.getEchartData()
      this.getEchartData1()
      this.getEchartData2()
    }, 1000)
  },
  methods: {
    changFn(v) {
      this.v = v
      if (v === 0) {
        const monday = moment().startOf('week').add(1, 'day').format('YYYY-MM-DD')
        console.log(monday)
        const endWeek = this.$moment().format('YYYY-MM-DD') // 当前时间：2021-05-11
        this.startTime2 = monday
        this.endTime2 = endWeek
        this.getLineInfo(1)
        this.getBarInfo()
        setTimeout(() => {
          this.getEchartData()
          this.getEchartData1()
        }, 1000)
      } else if (v === 1) {
        const startWeek = this.$moment()
          .subtract('0', 'd')
          .format('YYYY-MM-01') // 当前时间往前推1天（24小时）：2021-05-10
        const endWeek = this.$moment().format('YYYY-MM-DD') // 当前时间：2021-05-11
        // console.log(startWeek, endWeek)
        this.startTime2 = startWeek
        this.endTime2 = endWeek
        this.getLineInfo(1)
        this.getBarInfo()
        setTimeout(() => {
          this.getEchartData()
          this.getEchartData1()
        }, 1000)
      } else {
        const startWeek = this.$moment()
          .subtract('0', 'd')
          .format('YYYY-01-01') // 当前时间往前推1天（24小时）：2021-05-10
        const endWeek = this.$moment().format('YYYY-MM-DD') // 当前时间：2021-05-11
        // console.log(startWeek, endWeek)
        this.startTime2 = startWeek
        this.endTime2 = endWeek
        this.getLineInfo(2)
        this.getBarInfo()
        setTimeout(() => {
          this.getEchartData()
          this.getEchartData1()
        }, 1000)
      }
    },
    async getLineInfo(type = 1) {
      const res3 = await getLineInfo( // 获取chart1数据
        type, this.startTime2, this.endTime2
      )
      // console.log(res3.series)
      this.seriesArr = res3.series.map(item => item / 10000)
      this.xAxisArr = res3.xAxis
    },
    async getBarInfo() {
      const res4 = await getBarInfo( // 获取chart2数据
        this.startTime2, this.endTime2
      )
      // console.log(res4)
      this.seriesArr1 = res4.series.map(item => item / 100)
      this.xAxisArr1 = res4.xAxis
    },
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: '销售额趋势图',
            top: '2%',
            left: '42%'
          },
          xAxis: {
            type: 'category',
            data: this.xAxisArr,
            axisLine: {
              lineStyle: {
                type: 'dashed',
                color: '#d3d3d3'
              }
            },
            axisLabel: {
              color: '#000'
            }
          },
          yAxis: {
            type: 'value',
            name: '单位：万元',
            splitLine: {
              lineStyle: {
                color: '#f0f0f0',
                type: 'dashed'
              }
            }
          },
          tooltip: {
            show: true
          },
          series: [
            {
              data: this.seriesArr,
              type: 'line',
              smooth: true,
              symbolSize: 0,
              lineStyle: {
                width: 2,
                color: '#ff6c6c'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#ff6c6c' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#fff' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              },
              emphasis: {
                label: {
                  show: true
                },
                itemStyle: {
                  color: '#ff6c6c'
                },
                symbolSize: 10
              }
            },
            {
              data: this.seriesArr,
              type: 'scatter',
              symbol: 'circle',
              symbolSize: 5,
              itemStyle: {
                color: '#fff',
                borderWidth: 1,
                borderColor: '#ff6c6c'
              }
            }
          ]
        }
        myChart.setOption(option)
      }
    },
    getEchartData1() {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        const option = {
          title: {
            text: '销售额分布',
            top: '2%',
            left: '42%'
          },
          xAxis: {
            type: 'category',
            data: this.xAxisArr1,
            axisLine: {
              lineStyle: {
                type: 'dashed',
                color: '#d4d4d6'
              }
            }
          },
          tooltip: {
            show: true
          },
          yAxis: {
            type: 'value',
            name: '单位：元',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#f0f0f0'
              }
            }
          },
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#91b0ff' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#91b0ff' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          ],
          series: [
            {
              data: this.seriesArr1,
              type: 'bar',
              barWidth: '8%',
              itemStyle: {
                barBorderRadius: 5
              }
            }
          ]
        }
        myChart.setOption(option)
      }
    },
    getEchartData2() {
      const chart2 = this.$refs.chart2
      if (chart2) {
        const myChart = this.$echarts.init(chart2)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return `${params.name}\n${params.value}%`
            },
            rich: {
              a: { fontWeight: 'bold' },
              b: { fontWeight: 'normal' }
            }
          },
          // legend: {
          //   top: 'bottom',
          // },
          color: ['#85a7ff', '#99ebbd', '#ffb18b', '#c6ebff', '#becce6'],
          series: [
            {
              name: '合作商点位',
              type: 'pie',
              radius: ['15%', '50%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              roseType: 'radius',
              itemStyle: {
                borderRadius: 30
              },
              label: {
                show: true,
                position: 'top',
                formatter: function(params) {
                  return `${params.name}\n${params.value}%`
                },
                rich: {
                  a: { fontWeight: 'bold' },
                  b: { fontWeight: 'normal' }
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'normal'
                }
              },
              labelLine: {
                show: true,
                color: '#999'
              },
              data: this.piedata
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-container{
  padding: 20px;
  margin-top: 10px;
  background-color: #f8fafd;
    .dashboard-top{
      display: flex;
      flex-direction: row;
      width: 1356px;
      height: 564px;
      // background-color: pink;
      .ddll{
        flex: 1;
        .dtop{
          height: 166px;
          .dtop-left{
            width: 100%;
            height: 166px;
            // background-color:#fff;
            display: flex;
            .gd{
              width: 54%;
              height: 166px;
              background: #e9f3ff;
              background-image:url('../../assets/taskbg.png'),url('http://likede2-admin.itheima.net/img/task.66b715b7.png');
              background-repeat: no-repeat,no-repeat;
              background-position: 0 0,calc(100% - 12px) 100%;
              padding: 20px;
              border-radius: 20px;
              margin-right: 10px;
              .gd-header{
                display: flex;
                align-items: center;
                .gd-title{
                    font-size: 16px;
                    font-weight: 600;
                    color: #333;
                }
                span{
                  flex: 1;
                  margin-left: 10px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #999;
                }
              }
              .gd-body{
                display: flex;
                .gd-status{
                  margin-top: 20px;
                  flex:1;
                  text-align: center;
                  .gd-num{
                    height: 50px;
                    font-size: 36px;
                    font-weight: 600;
                    line-height: 50px;
                    color: #072074;
                    text-shadow: 2px 4px 7px rgba(85,132,255,.5);
                  }
                  .gd-text {
                    height: 17px;
                    margin-top: 3px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #91a7dc;
                    line-height: 17px;
                  }
                }
              }
            }
            .xs{
              width: 45%;
              height: 166px;
              background: #fbefe8 url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
              padding: 20px;
              border-radius: 20px;
              margin-left: 10px;
              .xs-header{
                display: flex;
                align-items: center;
                .xs-title{
                    font-size: 16px;
                    font-weight: 600;
                    color: #333;
                }
                span{
                  flex: 1;
                  margin-left: 10px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #999;
                }
              }
                .xs-body{
                display: flex;
                .xs-status{
                  margin-top: 20px;
                  flex:1;
                  text-align: center;
                  .xs-num{
                    height: 50px;
                    font-size: 36px;
                    font-weight: 600;
                    line-height: 50px;
                    color: #FF5758;
                    text-shadow: 2px 4px 7px rgba(255,99,85,.5);
                  }
                  .xs-text {
                    height: 17px;
                    margin-top: 3px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #de9690;
                    line-height: 17px;
                  }
                }
              }
            }
          }
        }
        .charts{
            width: 100%;
            height: 352px;
            margin-top: 20px;
            background: #fff;
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            .charts-header{
              width: 100%;
              height: 34px;
              // background-color: #FF5758;
              display: flex;
              .xs-header{
                display: flex;
                flex: 1;
                align-items: center;
                .xs-title{
                    font-size: 16px;
                    font-weight: 600;
                    color: #333;
                }
                span{
                  flex: 1;
                  margin-left: 10px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #999;
                }
              }
              .week-month-year{
                display: flex;
                width: 129px;
                height: 34px;
                background: rgba(233,243,255,.37);
                border-radius: 10px;
                justify-content: center;
                align-items: center;
                div{
                  width: 37px;
                  height: 25px;
                  font-size: 14px;
                  color: #9ca3b4;
                  cursor: pointer;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
                .checked{
                  background: #fff;
                  box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
                  border-radius: 7px;
                  font-weight: 600;
                  color: #333;
                }
              }
            }
            .charts-body{
              display: flex;
              .charts-left{
                width: 476px;
                height: 278px;
                // background-color: #91a7dc;
              }
              .charts-right{
                width: 476px;
                height: 278px;
                // background-color: #FF5758;
              }
            }
            }
      }
    }
    .dtop-right{
      width: 25%;
      height: 534px;
      background-color: #fff;
      margin-left: 20px;
      border-radius: 20px;
      margin-right: 15px;
      .skuList{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
          .gd-header{
            margin-top: 20px;
            margin-left: 20px;
            display: flex;
            align-items: center;
            .gd-title{
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }
            span{
              flex: 1;
              margin-left: 10px;
              font-size: 12px;
              font-weight: 400;
              color: #999;
            }
          }
          .sku-body{
            flex: 1;
            flex-direction: column;
            flex-direction: column;
            justify-content: space-between;
            margin-top: 5px;
            .el-row{
              display: flex;
              justify-content: space-between;
              margin: 25px 25px;
              .sku-l{
              width: 20%;
              display: inline-block;
              width: 16px;
              height: 20px;
              margin-right: 10px;
              text-align: center;
              background: url('../../assets/skutop.png');
              font-size: 12px;
              font-weight: 400;
              color: #e9b499;
              line-height: 14px;
              }
              .sku-name{
                width: 54%;
                height: 20px;
                font-size: 14px;
                font-weight: 500;
                color: #333;
                line-height: 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .sku-count{
                width: 25%;
                height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: #737589;
                line-height: 20px;
                text-align: right;
              }
            }
            .el-row:nth-child(1){
              .sku-l{
                width: 21px;
                height: 20px;
                background:url('../../assets/sku1.png');
                color: #8e5900;
              }
            }
            .el-row:nth-child(2){
              .sku-l{
                width: 21px;
                height: 20px;
                background:url('../../assets/sku2.png');
                color: #494949;
              }
            }
              .el-row:nth-child(3){
              .sku-l{
                width: 21px;
                height: 20px;
                background:url('../../assets/sku3.png');
                color: #cf6d3d;
              }
            }
          }

      }
    }
    .dbottom{
      width:1366px;
      height: 353px;
      background-color: #f8fafd;
      display: flex;
      border-radius: 20px;
      .dbottom-left{
        display: flex;
        width: 56%;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
        height: calc(40vh - 48px);
        min-height: 353px;
        background: #fff;
        border-radius: 20px;
        margin-right: 10px;
        .dbl-header{
          display: flex;
          padding: 10px 20px;
          .dbl-header-title{
            flex: 1;
            font-size: 16px;
            font-weight: 600;
            color: #333;
          }
          .el-icon-chat-dot-round{
            width: 16px;
            height: 16px;
            color: #5f84ff;
            cursor: pointer;
          }
        }
        .dbl-body{
          display: flex;
          justify-content: space-between;
        .dbl-chart{
          width: 439px;
          height: 284px;
          // background-color: #91a7dc;
          margin-left: 20px;
        }
        .dbl-right{
          width: 154px;
          height: 230px;
          padding-top: 47px;
          padding-left: 38px;
          margin-right: 60px;
          margin-top: 20px;
          background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
          background-size: 50% 50%;
          background-repeat: no-repeat;
          .count{
              height: 33px;
              font-size: 24px;
              font-weight: 600;
              color: #072074;
              line-height: 33px;
          }
          .name {
            height: 17px;
            margin-top: 6px;
            font-size: 12px;
            font-weight: 400;
            color: #000412;
            line-height: 17px;
          }
        }
        }
      }
       .dbottom-right{
        display: flex;
        width: 40%;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
        height: calc(40vh - 48px);
        min-height: 353px;
        background: #fff;
        border-radius: 20px;
        margin-left: 10px;
        .dbl-header{
          display: flex;
          padding: 10px 20px;
          .dbl-header-title{
            flex: 1;
            font-size: 16px;
            font-weight: 600;
            color: #333;
          }
          .el-icon-chat-dot-round{
            width: 16px;
            height: 16px;
            color: #5f84ff;
            cursor: pointer;
          }
        }
        .empty{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          div{
            margin-top: 80px;
          }
          .tips{
              margin-top: 25px;
              color: #20232a;
              font-size: 14px;
          }
        }
      }
    }
}
</style>
